<template>
  <el-dialog
    custom-class="create-task"
    :visible.sync="showElDialog"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
  >
    <div slot="title" class="title">
      <div>新建任务</div>
      <i class="el-icon-close" @click="showElDialog = false"></i>
    </div>
    <div class="content">
      <Panel title="选择服务">
        <div slot="action">总额：{{ servicePrice }}</div>
        <div class="service-sel">
          <ServiceItem
            v-for="(item, index) in serviceItems"
            :iconIndex="index + 1"
            :title="item.title"
            @activeService="selService"
            @changeAmount="changeAmount"
            :key="index"
            :price="item.AdvicePrice"
            :amount="
              item.IsCheck && item.hasOwnProperty('maxNum') ? item.maxNum : 0
            "
            :active="item.IsCheck"
          />
        </div>
      </Panel>
      <Panel title="客户信息">
        <el-form
          ref="kh-form"
          :model="form"
          label-position="right"
          label-width="100px"
          class="my-form-group creat-task-form"
        >
          <el-form-item class="form-item" label="公司名称">
            {{ form.companyName }}
          </el-form-item>

          <el-form-item class="form-item" label="委托HR座机">
            {{ form.PHONE }}
          </el-form-item>
          <el-form-item label="委托HR" class="form-item">
            {{ form.contactName }}
          </el-form-item>
          <el-form-item label="委托HR手机" class="form-item">
            {{ form.MOBILE }}
          </el-form-item>
          <el-form-item label="报告接收地址" class="form-item">
            <el-input
              v-model="form.EMAIL"
              placeholder="请输入报告接收地址"
            ></el-input>
          </el-form-item>
          <el-form-item class="form-item" label="报告抄送地址">
            <el-input
              v-model="form.MANY_EMAIL"
              placeholder="请输入报告抄送地址"
            ></el-input>
          </el-form-item>
        </el-form>
      </Panel>
      <Panel title="添加候选人" style="position: relative">
        <div v-for="(form, i) in hrForm" :key="i">
          <el-form
            :ref="'hr-form' + i"
            :data-id="'form' + i"
            :model="form"
            :rules="rules"
            label-position="right"
            label-width="160px"
            class="my-form-group creat-task-form"
            style="margin-top: 10px"
          >
            <el-form-item
              class="form-item"
              label="候选人姓名"
              prop="CANDIDATE_NAME"
            >
              <el-input
                v-model="form.CANDIDATE_NAME"
                placeholder="请输入候选人姓名"
              ></el-input>
            </el-form-item>
            <el-form-item
              class="form-item"
              label="英文名"
              prop="CANDIDATE_ENGLISHNAME"
            >
              <el-input
                v-model="form.CANDIDATE_ENGLISHNAME"
                placeholder="请输入英文名"
              ></el-input>
            </el-form-item>
            <el-form-item class="form-item" label="性别" prop="PARM_SEX">
              <el-select v-model="form.PARM_SEX" placeholder="请选择性别">
                <el-option label="男" value="13"></el-option>
                <el-option label="女" value="14"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              class="form-item"
              label="是否允许联系候选人"
              prop="IS_CONTACT_CANDIDATE"
            >
              <el-select
                v-model="form.IS_CONTACT_CANDIDATE"
                placeholder="请选择"
              >
                <el-option label="是" :value="true"></el-option>
                <el-option label="否" :value="false"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="手机号码"
              class="form-item"
              prop="CANDIDATE_PHONE"
            >
              <el-input
                v-model="form.CANDIDATE_PHONE"
                placeholder="请输入手机号码"
              ></el-input>
            </el-form-item>
            <el-form-item label="邮箱" class="form-item" prop="CANDIDATE_EMIAL">
              <el-input
                v-model="form.CANDIDATE_EMIAL"
                placeholder="请输入邮箱"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="身份证号码"
              class="form-item"
              prop="IDENTITY_NUM"
            >
              <el-input
                v-model="form.IDENTITY_NUM"
                placeholder="请输入身份证号码"
              ></el-input>
            </el-form-item>
            <el-form-item label="工作地址" class="form-item" prop="WORKPLACE">
              <el-input
                v-model="form.WORKPLACE"
                placeholder="请输入工作地址"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="拟入职部门"
              class="form-item"
              prop="INTENDEDAGENCY"
            >
              <el-input
                v-model="form.INTENDEDAGENCY"
                placeholder="请输入拟入职部门"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="订单加急处理"
              class="form-item"
              prop="Is_Urgent"
            >
              <el-checkbox v-model="form.Is_Urgent"
                >（预计费用200元）</el-checkbox
              >
            </el-form-item>
          </el-form>
        </div>
        <i
          class="el-icon-circle-plus-outline add-hr-form"
          @click="addHrForm"
        ></i>
        <i
          v-if="hrForm.length >= 2"
          class="el-icon-remove-outline remove-hr-form"
          @click="removeHrForm"
        ></i>
      </Panel>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button class="close-btn" @click="showElDialog = false" size="small">
        取 消
      </el-button>
      <el-button type="primary" size="small" @click="submitForm()"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
import {
  Required,
  RequiredAndEmail,
  RequiredAndPhone,
  FillerFieldRules,
} from "@/utils/validateRules.js";
import Panel from "./Panel.vue";
import ServiceItem from "./ServiceItem.vue";
import {
  GetModuleListByCompanyNo,
  SaveTask,
  GetOrderCompany,
} from "@/api/task/list.js";
export default {
  components: { Panel, ServiceItem },
  data() {
    return {
      showElDialog: false,
      serviceItems: [
        // { title: "基础信息查询", AdvicePrice: 30, IsCheck: false },
        // { title: "信用核实", AdvicePrice: 30, IsCheck: false },
        // { title: "学历核实", maxNum: 1, AdvicePrice: 100, IsCheck: false },
        // { title: "商业利益<br/>冲突信息", AdvicePrice: 30, IsCheck: false },
        // { title: "民事诉讼<br/>记录核实", AdvicePrice: 30, IsCheck: false },
        // { title: "药物负面<br/>记录查询", AdvicePrice: 30, IsCheck: false },
        // { title: "工作履历", AdvicePrice: 30, IsCheck: false, maxNum: 1 },
        // { title: "工作表现鉴定", AdvicePrice: 200, IsCheck: false, maxNum: 1 }
      ],
      form: {}, //客户信息
      hrForm: [{}],
      rules: {
        CANDIDATE_PHONE: RequiredAndPhone,
        ...FillerFieldRules(["CANDIDATE_EMIAL"], RequiredAndEmail),
        ...FillerFieldRules(
          [
            "CANDIDATE_NAME",
            "PARM_SEX",
            "IS_CONTACT_CANDIDATE",

            "IDENTITY_NUM",
          ],
          Required
        ),
      },
    };
  },
  computed: {
    servicePrice: function() {
      let AdvicePrice = 0;
      this.serviceItems.forEach((r) => {
        if (r.IsCheck) {
          if (r.hasOwnProperty("maxNum")) {
            AdvicePrice += r.AdvicePrice * r.maxNum;
          } else {
            AdvicePrice += r.AdvicePrice;
          }
        }
      });
      return AdvicePrice;
    },
  },
  created() {
    GetModuleListByCompanyNo({ companyNO: 0 })
      .then((r) => {
        let sel = ["学历核实", "工作履历", "工作表现鉴定"]; //可以选择份数的服务
        (r || []).forEach((s) => {
          let item = {
            INDEX_NO: s.INDEX_NO,
            title: s.NAME,
            AdvicePrice: s.AdvicePrice,
            product_no: s.Product_No,
            IsCheck: false,
          };
          if (sel.indexOf(s.NAME) !== -1) {
            item.maxNum = 1;
          }
          this.serviceItems.push(item);
        });
      })
      .catch(() => {});

    GetOrderCompany({})
      .then((r) => {
        this.form = r;
      })
      .catch(() => {});
  },
  methods: {
    addHrForm() {
      this.hrForm.push({});
    },
    removeHrForm() {
      this.hrForm.splice(this.hrForm.length - 1, 1);
    },
    selService(index) {
      this.serviceItems[index - 1].IsCheck = !this.serviceItems[index - 1]
        .IsCheck;
    },
    changeAmount(index, val) {
      this.serviceItems[index - 1].maxNum = val;
    },
    //首字母大写为外部可用方法
    AddTask() {
      this.showElDialog = true;
      this.hrForm = [{}];
      this.$nextTick(() => {
        setTimeout(() => {
          this.$refs["hr-form0"]["0"].clearValidate();
        }, 600);
      });
    },

    submitForm() {
      let selected = false;
      for (let i = 0; i <= 7; i++) {
        //前面8个服务最少选择一个
        if (this.serviceItems[i].IsCheck === true) {
          selected = true;
        }
      }
      if (!selected) {
        this.$alert("请选择至少一项背景调查服务！", "提示", {
          confirmButtonText: "确定",
        });
        return;
      }

      let validatePromise = [];
      for (let i = 0; i < this.hrForm.length; i++) {
        validatePromise.push(
          new Promise((resolve, reject) => {
            this.$refs["hr-form" + i]["0"].validate((valid) => {
              if (valid) resolve();
              reject("请按照提示正确填写内容！");
            });
          })
        );
        if (!this.hrForm[i].hasOwnProperty("Is_Urgent")) {
          this.hrForm[i].Is_Urgent = false;
        }
      }

      for (let i = 0; i < this.serviceItems.length; i++) {
        let n = this.serviceItems[i];
        if (!n.hasOwnProperty("maxNum")) {
          if (n.IsCheck) {
            this.serviceItems[i].maxNum = 1;
          } else {
            this.serviceItems[i].maxNum = 0;
          }
        }
      }
      Promise.all(validatePromise)
        .then(() => {
          SaveTask(this.form, this.serviceItems, this.hrForm)
            .then(() => {
              this.$message("添加任务成功");
              this.showElDialog = false;
              this.$emit("editSuccess");
            })
            .catch(() => {});
        })
        .catch((msg) => {
          this.$message({
            message: msg,
            type: "warning",
          });
        });
    },
  },
};
</script>
<style lang="scss">
.create-task {
  width: 930px;
  background-color: #292b3e;
  color: #fff;
  .close-btn {
    background-color: #b0bee1;
    border: none;
  }
  .title {
    display: flex;
    justify-content: space-between;
    i {
      cursor: pointer;
    }
  }
  .content {
    max-height: calc(100vh - 360px);
    overflow-y: auto;
    overflow-x: hidden;
    .service-sel {
      display: flex;
      justify-content: space-between;
    }
    .creat-task-form {
      width: 80%;
    }
    /*.el-form-item.form-item {*/
    /*  margin-bottom: 10px;*/
    /*}*/
    .add-hr-form {
      position: absolute;
      right: 42px;
      bottom: 130px;
      font-size: 26px;
      cursor: pointer;
      color: #5284ff;
    }
    .remove-hr-form {
      position: absolute;
      right: 42px;
      bottom: 90px;
      font-size: 26px;
      cursor: pointer;
      color: #5284ff;
    }
  }
}
</style>
